<template>
  <div class="c-ph24">
    <div class='c-fs28 c-pt90 c-textAlign-c c-pb72'>请选择您要绑定的账号</div>
    <div class='c-pb80 c-flex-column c-flex-center' v-for='(item,index) in userAccountList' :key="index">
      <div @click='clickSelectAccount(index)' class='c-hh110 c-ww520 c-br50 c-flex-row c-aligni-center c-pl100' :class='selectIndex == index ? "theme-bd1":"c-bd1-gray"'>
        <img class='c-ww80 c-hh80 c-brp50' :src="item.headimgurl || require('@/assets/defult_head.png')" />
        <div class='c-pl20 c-flex-column c-flex-grow1 c-w0'>
          <div class='c-fs24 c-text-ellipsis1'>{{item.nickname || '未知'}}</div>
          <div class='c-fs18 c-fc-gray c-pt10'>{{vipTypeMap[item.vipType]}}</div>
        </div>
      </div>
    </div>

    <div @click='clickComfirm' class='c-mt120 c-hh80 c-flex-row c-flex-center c-br40 c-fc-white theme-bg'>确定</div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
let isClicking = false;
let vCode = '';
export default {
  name: "ChooseAccount",
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      userAccountList: [],
      selectIndex: 0,
      vipTypeMap: {
        1: '普通用户',
        2: 'VIP',
        3: JSON.parse(localStorage.getItem("customName")).agentName,
        4: 'SVIP',
        5: JSON.parse(localStorage.getItem("customName")).partnerName,
        6: JSON.parse(localStorage.getItem("customName")).branchName,
        7: JSON.parse(localStorage.getItem("customName")).cooName,
        8: JSON.parse(localStorage.getItem("customName")).agencyName
      }
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {

    //点击选择一个用户
    clickSelectAccount(index) {
      this.selectIndex = index;
    },
    //点击确定按钮
    clickComfirm() {
      if (isClicking) {
        return;
      }
      isClicking = true;
      let data = {
        mobile: this.userAccountList[this.selectIndex].mobile,
        selectedUserId: this.userAccountList[this.selectIndex].userId,
        code: vCode,
        companyId: localStorage.getItem("companyId"),
      };
      utilJs.postMethod(`${global.apiurl}members/confirmBindMobile`, data, res => {
        let that = this;
        this.$showCjToast({
          text: "找回成功",
          type: "success",
        }).then(() => {
          if ((navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1) && window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' && localStorage.getItem("companyId")) {
            // 把之前的cookie设置过期，防止cookie不停地增加导致http request 400错误
            let exp = new Date();
            exp.setTime(exp.getTime() - 1);
            document.cookie = localStorage.getItem("companyId") + "|token=;expires=" + exp.toGMTString() + ";path=/";
          }
          localStorage.clear();
          if (utilJs.isIOSApp()) {
            window.webkit.messageHandlers.iosWechatLoginOut.postMessage('loginOut');
            return;
          }
          if (utilJs.isAndroidApp()) {
            utilJs.androidAppExit();
            return;
          }
          let pp = that.$route.query.prevPath ? that.$route.query.prevPath : null;
          if (pp) {
            window.location.href = `${window.location.href.split("#")[0]}#${pp}`;
          } else {
            window.location.replace(`${window.location.href.split("#")[0]}#/?time=${new Date().getTime()}`);
            window.location.reload(true);
          }
        })
        isClicking = false;
      }, failRes => {
        isClicking = false;
      });
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    setDocumentTitle("选择账号");// eslint-disable-line
    vCode = this.$route.query.code;
    this.userAccountList = JSON.parse(localStorage.getItem('accountList'));
    this.wechatShare();
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
  },
  deactivated() {
    localStorage.removeItem('accountList');
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
